<template>
  <div class="home-card-item">
    <div class="home-card-item-head">
      <div class="head-icon" v-if="headIcon">
        <svg-icon
          :icon-class="headIcon"
          :style="{
            ...headIconStyle()
          }"
        />
      </div>
      <div class="head-title"
        :style="{
          fontSize: nameSize
        }"
      >
        {{ headName }}
      </div>
      <div class="head-right">
        <slot name="head-extra"></slot>
      </div>
    </div>
    <div class="home-card-item-body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  headIcon: { type: String },
  iconSize: { type: String, default: '18px' },
  iconColor: { type: String, default: '#44a7f7' },
  headName: { type: String },
  nameSize: { type: String, default: '18px' }
})

const headIconStyle = () => {
  const { iconColor } = props
  let style = {}
  if (iconColor) {
    style['color'] = iconColor
    style['width'] = '1.1em'
    style['height'] = '1.1em'
  }
  return style
}


</script>

<style lang="scss" scoped>
.home-card-item {
  border-radius: 5px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #000000a6;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  background: #fff;
  transition: all 0.3s;
  box-shadow: 0 1px 8px 0 rgba(0,0,0,.1);
  // box-shadow: 3px 5px 10px rgba(40,40,40,.36);
  // margin-bottom: 15px;
  // height: 300px;
  .home-card-item-head {
    // border-bottom: 1px solid #ececec;
    padding: 15px 15px;
    padding-bottom: 0;
    display: flex;
    .head-icon {
      font-size: 20px;
      margin-right: 8px;
      display: flex;
      align-items: center;
      // color: var(--el-color-danger);
    }
    .head-title {
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
    }
    .head-right {
      margin-left: auto;
    }
  }
  .home-card-item-body {
    padding: 15px 15px;
  }
}
</style>
